<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>AIC</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<link type="text/css" rel="stylesheet" href="../css/common.css">

		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.mui-table-view-cell:after {
				position: absolute;
				right: 0;
				bottom: 0;
				left: 15px;
				height: 0px;
				content: '';
				-webkit-transform: scaleY(.5);
				transform: scaleY(.5);
				background-color: #c8c7cc;
			}
			
			.kj-item {
				width: 100%;
				border-top: 1px solid #DADAD8;
				border-bottom: 1px solid #DADAD8;
				margin-top: 0px;
				clear: both;
				position: relative;
				overflow: hidden;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			
			.mui-table-view-cell {
				position: relative;
				overflow: hidden;
				padding: 5px 0px;
				-webkit-touch-callout: none;
			}
			
			.bg-img {
				background-image: url(../images/mainBg.jpg);
			}
			
			.kj-item span,
			.kj-item span s,
			.kj-item span s strong {
				color: #282633;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content bg-img">
			<ul id="machines" class="mui-table-view bg-img" style="margin-top: 0px;" v-cloak>
				<li class="mui-table-view-cell" v-for="item in machines" style="margin-bottom: 0px;padding-top: 0px;" @click="open_result(item)">
					<div class="kj-item">
						<img :src="item.imgurl" alt="矿机"/>
						<span>
							<s>
						{{item.machineName}}</s><br/>
				               价格:&nbsp; <s><strong>{{item.price}} AIC</strong></s><br/>
				        总收益:&nbsp; <s>{{item.totalProfit}}</s> AIC<br/>
				        运行周期:&nbsp; <s>{{item.totalDays}} 天</s><br/>
				        </span>
						<a target="_self" class="buy_kuangji" @click.stop="buy(item)"><img src="../images/car.png?s"></a>
						<div class="bg"></div>
					</div>
				</li>
			</ul>
		</div>
	</body>

	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script src="../js/common.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script>
		mui.init();

		//vue对象，数据
		var data_machines = new Vue({
			el: '#machines',
			data: {
				machines: []
			},
			methods: {
				open_result: function(item) {
					mui.openWindow({
						id: 'kuangji-detail',
						url: '../kuangji/kuangji-detail.html',
						extras: {
							kuangjiid: item.id
						}
					});
				},
				buy: function(item) {
					var btnArray = ['取消', '确认'];
					mui.confirm('确认购买矿机?', '购买矿机', btnArray, function(e) {
						if(e.index == 1) {
							//调用购买接口
							buyMachine(item.id);
						} else {
							""
						}
					})
				}
			}
		});

		//数据格式转换
		function convert(items) {
			var newItems = [];
			//遍历
			items.forEach(function(item) {
				newItems.push({
					id: item.id,
					imgurl: item.machineImg,
					price: item.price,
					totalDays: item.totalDays,
					totalProfit: item.totalProfit,
					machineName: item.machineName,
				});
			});
			return newItems;
		}

		//购买矿机

		mui.plusReady(function() {
			getMachineList();
		});

		//获取矿机列表
		function getMachineList() {
			mui.ajax({
				url: GetMachineList,
				type: 'POST',
				dataType: "json",
				headers: {
					"token": getTooken(),
					'Content-Type': 'application/json',
					'charset': 'utf-8'
				},
				timeout: 10000,
				success: function(data) {
					mConsole.log("获取矿机列表" + JSON.stringify(data))
					var code = data.code;
					if(code == 0) {
						data_machines.machines = data_machines.machines.concat(convert(data.page.list));
					} else {
						mymui(data.msg);
					}
					plus.nativeUI.closeWaiting();
				},
				error: function(xhr, type, errorThrown) {
					mymui("网络连接失败");
				}
			});
		}

		//购买矿机
		function buyMachine(machineId) {
			mui.ajax({
				url: BuyMachine,
				type: 'POST',
				data: {
					"machineId": machineId
				},
				dataType: "json",
				headers: {
					"token": getTooken(),
					'charset': 'utf-8'
				},
				timeout: 10000,
				success: function(data) {
					mConsole.log("购买矿机：" + JSON.stringify(data));
					var code = data.code;
					if(code == 0) {
						mui.fire(plus.webview.getWebviewById('tabmy.html'), 'reLoadData');
						mui.toast("购买成功");
					} else {
						mymui(data.msg);
					}
					plus.nativeUI.closeWaiting();
				},
				error: function(xhr, type, errorThrown) {
					mymui("网络连接失败");
				}
			});
		}
	</script>

</html>